<template>
    <div>
        <div class="title">个人课表</div>
        <div class="table">
            <div class="tr" v-for="row in 6" :key="row">
                <div class="td" v-for="col in 8" :key="col" @click="showDetail(row - 1, col - 1)">
                    <template v-if="row - 1 == 0 || col - 1 == 0">
                        {{ scheduleData[row - 1][col - 1] }}
                    </template>
                    <template v-else-if="scheduleData[row - 1][col - 1]">
                        <span>{{ scheduleData[row - 1][col - 1].name }}</span>
                        <span>{{ scheduleData[row - 1][col - 1].teacher }}</span>
                        <span>{{ scheduleData[row - 1][col - 1].week }}(周)</span>
                        <span>{{ scheduleData[row - 1][col - 1].location }}</span>
                    </template>
                </div>
            </div>
        </div>

        <el-dialog v-if="scheduleData[chooseRow][chooseCol] && chooseRow != 0 && chooseCol != 0" title="课程详情"
            :visible.sync="dialogFormVisible" width="50%">
            <el-descriptions style="margin: 20px 10px;" :column="3" border>
                <el-descriptions-item label="课程编号">{{ scheduleData[chooseRow][chooseCol].cid }}</el-descriptions-item>
                <el-descriptions-item label="修读学期">{{ scheduleData[chooseRow][chooseCol].term }}</el-descriptions-item>
                <el-descriptions-item label="课程名">{{ scheduleData[chooseRow][chooseCol].name }}</el-descriptions-item>
                <el-descriptions-item label="授课教师">{{ scheduleData[chooseRow][chooseCol].teacher }}</el-descriptions-item>
                <el-descriptions-item label="总学时">{{ scheduleData[chooseRow][chooseCol].period }}</el-descriptions-item>
                <el-descriptions-item label="学分">{{ scheduleData[chooseRow][chooseCol].credit }}</el-descriptions-item>
                <el-descriptions-item label="地点">{{ scheduleData[chooseRow][chooseCol].location }}</el-descriptions-item>
                <el-descriptions-item label="周次">{{ scheduleData[chooseRow][chooseCol].week }}</el-descriptions-item>
                <el-descriptions-item label="节次">{{ scheduleData[chooseRow][chooseCol].section }}</el-descriptions-item>
                <el-descriptions-item label="课程属性">{{ scheduleData[chooseRow][chooseCol].attr }}</el-descriptions-item>
                <el-descriptions-item label="课容量">{{ scheduleData[chooseRow][chooseCol].capacity }}</el-descriptions-item>
                <el-descriptions-item label="选课人数">{{ scheduleData[chooseRow][chooseCol].selectNum }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            scheduleData: "",
            chooseRow: 0,
            chooseCol: 0,
            dialogFormVisible: false,
        }
    },
    created() {
        this.scheduleData = this.getScheduleData();
        // this.load();
    },
    methods: {
        /**
       * 选课数据加载
       */
        load() {
            this.request.get("/student/schedule", {
                params: {
                    sid: this.sid
                }
            }).then(res => {
                this.addCoursesToScheduleData(res.courses);
            })
        },
        /**
        * 课程表弹出事件
        */
        showDetail(row, col) {
            this.chooseRow = row;
            this.chooseCol = col;
            this.dialogFormVisible = true;
        },
        /**
         * 初始化课程表格数据
         */
        getScheduleData() {
            let arr = new Array(8);
            for (let i = 0; i < arr.length; i++) {
                arr[i] = new Array(6);
            }
            arr[0][1] = "星期一";
            arr[0][2] = "星期二";
            arr[0][3] = "星期三";
            arr[0][4] = "星期四";
            arr[0][5] = "星期五";
            arr[0][6] = "星期六";
            arr[0][7] = "星期日";

            arr[1][0] = "第1、2节";
            arr[2][0] = "第3、4节";
            arr[3][0] = "第5、6节";
            arr[4][0] = "第7、8节";
            arr[5][0] = "第9、10节";
            arr[3][4] = {
                cid: 'C2222102910',
                term: '2020秋',
                name: '计算机组成原理',
                teacher: '毛爱英',
                period: '32',
                credit: '2.5',
                location: '浮山校区 博知楼250',
                week: '1-8',
                section: '47',
                attr: '必修',
                capacity: '32',
                selectNum: '12',
            }
           
            arr[4][2] = {
                cid: 'C2222102910',
                term: '2020秋',
                name: '计算机组成原理',
                teacher: '毛爱英',
                period: '32',
                credit: '2.5',
                location: '浮山校区 博知楼250',
                week: '1-8',
                section: this.sectionToZh(27),
                attr: '必修',
                capacity: '32',
                selectNum: '12',
            }
            return arr;
        },
        /**
         * 将课程添加到课程表格中并转换节次为中文
         */
        addCoursesToScheduleData(courses) {
            for (let course in courses) {
                let secion=course.section;
                course.section=this.sectionToZh(secion);
                this.scheduleData[Math.floor((section % 10)+1)/2][Math.floor(section / 10)]=course;
            }
        },
        /**
        * 将十进制的节次解析为中文
        */
        sectionToZh(section) {
            const week = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
            let sectionZh = `${week[Math.floor(section / 10) - 1]} ${section % 10}、${section % 10 + 1}节`;
            return sectionZh;
        },
    },
}

</script>
<style scoped>
.title {
    text-align: center;
    font-size: 22px;
    margin-bottom: 15px;
    color: #303133;
}

.table {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    color: #606266;
    margin: 10px;
}

.tr {
    display: flex;
    flex-direction: row;

    /* width: 1000px; */
    /* color: antiquewhite; */
}

.td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 100px;
    border: 1px solid #484444;
    font-size: 14px;

}

.tr>.td:first-child {
    width: 100px;
    font-size: 16px;
    color: #303133;
}

.tr:first-child>.td {
    height: 40px;
    font-size: 16px;
    color: #303133;
}
</style>